<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        @handleOperateEvent="handleOperateEvent"
        :operateList="operateList"
        :column="column"
        :getList="tmOrderPage"
        uniqueId="mesTeamTable"
      >
      </ele-page>
      <el-drawer
        :visible.sync="visible"
        :wrapperClosable="false"
        :isShowBackBtn="false"
        :isShowSubmitBtn="false"
        :isShowCancelBtn="false"
        size="95%"
        top="4vh"
        :append-to-body="true"
        :close-on-click-modal="false"
      >
        <div
          style="
        margin-top:10px;
        margin-left :10px;
        margin-right:10px;
        bottom :10px;
        "
        >
          <el-row type="flex" class="row-bg" justify="end">
            <el-button type="primary" @click="updateMainData()">基础数据更新</el-button>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light">
                基础数据
              </div></el-col>
          </el-row>
          <el-form ref="form" :model="detailData" label-width="110px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="车型">
                  <el-input v-model="detailData.modelName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="门店">
                  <el-input v-model="detailData.vehicleXwName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单号">
                  <el-input v-model="detailData.orderCode" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="排放标准">
                  <el-input v-model="detailData.vehicleEmissionStdText"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="VIN码">
                  <el-input v-model="detailData.vinCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="UWB绑定">
                  <el-input v-model="detailData.uwbCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span=6>
                <el-form-item label="接车时间">
                  <el-input v-model="detailData.receiveCarTime" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="颜色">
                  <el-input v-model="detailData.modelColor"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="订单类型">
                  <el-input v-model="detailData.orderTypeName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单分类">
                  <el-input v-model="detailData.orderClassifyName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span=6>
                <el-form-item label="发动机排量">
                  <el-input v-model="detailData.outputVolume"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发动机号">
                  <el-input v-model="detailData.vehicleEcode"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="里程数(km)">
                  <el-input v-model="detailData.mileage"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="首次上牌时间">
                  <div style="width:100%">
                    <el-date-picker
                      v-model="detailData.vehicleRegisterDateFormat"
                      type="date"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                      style="width:100%"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="新车指导价">
                  <el-input v-model="detailData.vehicleGuidePrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="动力类型">
                  <el-input v-model="detailData.vehicleEnergyTypeText"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="end">
              <el-col :span="24">
                <el-form-item label="初检报告">
                  <el-button type="primary" @click="downloadCertificationReport(detailData.vehicleCertificationReportUrl)" v-if="isHaveCj">查看</el-button>
                  <el-button type="primary"  v-if="!isHaveCj" disabled >无初检报告</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="end">
              <el-button type="primary" @click="updateMainPic()">主图更新</el-button>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="车辆主图" >
                  <el-image
                    :src="detailData.vehicleCarMainPicUrl"
                    class="image"
                    fit="contain"
                  ></el-image>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-menu
                  class="el-menu-vertical-demo"
                  background-color="#e5e9f2">
                  <el-submenu index="1">
                    <template slot="title">
                      <span>复检工单</span>
                    </template>
                    <el-table
                      :data="detailData.recheckData"
                      border
                      style="width: 100%">
                      <el-table-column
                        type="index"
                        label="序号"
                        min-width="50"
                      />
                      <el-table-column
                        prop="partSystem"
                        label="系统"
                        min-width="80">
                      </el-table-column>
                      <el-table-column
                        prop="partGroup"
                        label="分组"
                        min-width="60">
                      </el-table-column>
                      <el-table-column
                        prop="partsName"
                        label="部件"
                        min-width="120">
                      </el-table-column>
                      <el-table-column
                        prop = "descFirst"
                        label="状态"
                        min-width="120">
                        <template slot-scope="scope">
                <span>
                  {{
                    scope.row.descFirst === scope.row.descSecond ?
                      scope.row.descFirst:
                      scope.row.descSecond.includes(scope.row.descFirst)?
                        scope.row.descSecond:
                        scope.row.descFirst + " " + scope.row.descSecond
                  }}
                </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="照片"
                        min-width="100">
                        <template slot-scope="scope">
                          <el-button @click="viewPic(scope.row.photoUrl)" type="text" size="small">查看</el-button>
                          <el-button @click="updateSubPic(scope.row,1)" type="text" size="small">修改</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-menu
                  class="el-menu-vertical-demo"
                  background-color="#e5e9f2"
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <span>整备工单</span>
                    </template>
                    <el-table
                      :data="detailData.tmPreparationDataList"
                      border
                      style="width: 100%">
                      <el-table-column
                        type="index"
                        label="序号"
                        min-width="50"
                      />
                      <el-table-column
                        prop="preparationOrderCode"
                        label="整备工单"
                        min-width="150">
                      </el-table-column>
                      <el-table-column
                        prop="repairTypeName"
                        label="工种"
                        min-width="80">
                      </el-table-column>
                      <el-table-column
                        prop="partSystem"
                        label="系统"
                        min-width="80">
                      </el-table-column>
                      <el-table-column
                        prop="partGroup"
                        label="分组"
                        min-width="60">
                      </el-table-column>
                      <el-table-column
                        prop="partsName"
                        label="部件"
                        min-width="120">
                      </el-table-column>
                      <el-table-column
                        prop="orderName"
                        label="整备项"
                        min-width="120">
                      </el-table-column>
                      <el-table-column
                        prop="orderState"
                        label="状态"
                        min-width="75">
                        <template slot-scope="scope">
                <span>
                  {{orderStateEnum(scope.row.orderState)}}
                </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="isDispense"
                        label="分配状态"
                        min-width="75">
                        <template slot-scope="scope">
                <span>
                  {{isDispenseEnum(scope.row.isDispense)}}
                </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="mmcQuote"
                        label="报价单状态"
                        min-width="75">
                        <template slot-scope="scope">
                <span>
                  {{mmcQuoteEnum(scope.row.mmcQuote)}}
                </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="整备前照片"
                        min-width="100">
                        <template slot-scope="scope">
                          <el-button @click="viewPic(scope.row.photoUrl)" type="text" size="small">查看</el-button>
                          <el-button @click="updateSubPic(scope.row,2)" type="text" size="small">修改</el-button>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="整备后照片"
                        min-width="100">
                        <template slot-scope="scope">
                          <el-button @click="viewPic(scope.row.photoUrlNew)" type="text" size="small">查看</el-button>
                          <el-button @click="updateSubPic(scope.row,3)" type="text" size="small">修改</el-button>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="操作"
                        min-width="60">
                        <template slot-scope="scope">
                          <el-button style="color: #e63838;" type='text' @click="doDelete(scope.row.id)" size="small">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-menu
                  class="el-menu-vertical-demo"
                  background-color="#e5e9f2"
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <span>报告</span>
                    </template>
                    <el-table
                      :data="detailData.mesTmReportFiles"
                      border
                      style="width: 100%">
                      <el-table-column
                        label="类型"
                        min-width="100">
                        <template slot-scope="scope">
                <span>
                  {{reportTypeEnum(scope.row.reportType)}}
                </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="状态"
                        min-width="100">
                        <template slot-scope="scope">
                          <el-tag effect="dark" :type="reportStateTypeEnum(scope.row)" :key="scope.row.inCreate">
                            {{reportStateEnum(scope.row)}}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="操作"
                        min-width="100">
                        <template slot-scope="scope">
                          <el-button @click="viewFile(scope.row)" :disabled="!scope.row.reportUrl" type="text" size="small">查看</el-button>
                          <el-button @click="createFile(scope.row)"  :disabled="scope.row.isPush === 'Y'" type="text" size="small">重生成</el-button>
                          <el-button @click="pushFile(scope.row)"   :disabled="!scope.row.reportUrl || scope.row.isPush === 'Y'" type="text" size="small">推送</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-form>
        </div>

      </el-drawer>
      <el-dialog title="图片"
                 :visible.sync="dialogVisible"
                 width="80%"
                 :append-to-body="true"
                 v-loading="isLoading"
                 :close-on-click-modal="false">
        <div
          v-for="(item, key) in imgUrlList"
          :key="key"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="imgUrlList">
          </el-image>
        </div>
      </el-dialog>
      <el-dialog title="主图更新"
                 :visible.sync="mainPicUpdateDialogVisible"
                 width="100%"
                 :append-to-body="true"
                 v-loading="isLoading"
                 :close-on-click-modal="false">
        <el-row type="flex" class="row-bg">
          <el-button type="primary" @click="doUpdateMainPic()">保存</el-button>
        </el-row>
        <el-upload
          class="avatar-uploader"
          :action="`${adminUrl}file`"
          :headers="{Satoken: $store.getters.token}"
          :data="{bucket: 'kataichi'}"
          :show-file-list="false"
          :on-success="handleMainPicSuccess"
        >
          <img v-if="mainImgUrl" :src="mainImgUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-dialog>
      <el-dialog title="图片更新"
                 :visible.sync="subPicUpdateDialogVisible"
                 width="100%"
                 :append-to-body="true"
                 v-loading="isLoading"
                 :close-on-click-modal="false">
        <el-row type="flex" class="row-bg">
          <el-button type="primary" @click="doUpdateSubPic()">保存</el-button>
        </el-row>
        <el-upload
          :file-list="fileList"
          :on-success="handleSubSuccess"
          :action="`${adminUrl}file`"
          :headers="{Satoken: $store.getters.token}"
          :data="{bucket: 'kataichi'}"
          list-type="picture-card"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-dialog>
      <el-dialog :visible.sync="subPicViewdialogVisible" width="100%">
        <el-image
          :src="subImgUrl"
          fit="scale-down"
        ></el-image>
      </el-dialog>
    </div>
    <!-- 此组件放到与抽屉平级，理论上不需要修改 -->
  </div>
</template>

<script>
import {
  searchConfig,
  rowConfig,
  isDispenseEnum,
  orderStateEnum,
  mmcQuoteEnum,
  reportTypeEnum,
  operateList, reportStateEnum,reportStateTypeEnum
} from './config'
const { adminUrl } = url();

import {
  preparationDelete,
  tmOrderInfo, tmOrderMainDataUpdate,
  tmOrderMainPicUpdate,
  tmOrderPage,
  tmOrderReportCreate, tmOrderReportPush,
  tmOrderSubPicUpdate,mesTmOrderDelete
} from "@/api/order/tmOrder";
import {getDict} from "@/api/common";
import url from "@/axios/url";

export default {
  name: 'repairItem',
  mixins: [ searchConfig],
  data() {
    const self = this
    return {
      fileList: [],
      fileListOrg: [],
      isHaveCj:true,
      adminUrl: adminUrl,
      operateList,
      visible: false,
      isLoading: false,
      loading: false,
      imgUrlList:[],
      mainImgUrl:'',
      subImgUrl:'',
      dataId:'',
      subType:0,
      detailData: {},
      subId: '',
      dialogVisible: false,
      subPicViewdialogVisible: false,
      mainPicUpdateDialogVisible: false,
      subPicUpdateDialogVisible: false,
      tmOrderPage,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: "orderState",
          label: '状态',
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("mes_pick_up_order_status")
            return list.data.result;
          },
          showOverflowTooltip: true,
        },
        {
          prop: 'modelName',
          label: '车型',
          showOverflowTooltip: true,
          minWidth: 170,
        },
        {
          prop: 'vehicleXwName',
          label: '门店',
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          prop: 'vinCode',
          label: 'VIN码',
          showOverflowTooltip: true,
          minWidth: 170,
        },
        {
          prop: 'uwbCode',
          label: 'UWB码',
          showOverflowTooltip: true,
          minWidth: 70,
        },
        {
          prop: 'receiveCarTime',
          label: '接车时间',
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'vehicleGuidePrice',
          label: '新车指导价',
          minWidth: 100,
          showOverflowTooltip: true
        },
        {
          prop: 'vehicleRegisterDateFormat',
          label: '首次上牌时间',
          minWidth: 120,
        },
        {
          prop: 'pushState',
          label: '报价单推送状态',
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          prop: 'confimState',
          label: '报价单确认状态',
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          prop: 'reportAState',
          label: '复检报告状态',
          minWidth: 120,
        },
        {
          prop: 'reportBState',
          label: '整备报告状态',
          minWidth: 120,
        },
        {
          prop: 'reportCState',
          label: '下线质检报告状态',
          minWidth: 130,
        },
        {
          prop: 'reportDState',
          label: '认证报告状态',
          minWidth: 120,
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 150,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ],
      form:{}
    }
  },
  computed: {},
  methods: {
    getData()
    {
      tmOrderInfo(this.dataId).then(res => {
        this.detailData = res.data.result
        this.detailData.vehicleCarMainPicUrl=res.data.result.vehicleCarMainPicUrl?res.data.result.vehicleCarMainPicUrl.split(',')[0]:''
        this.isHaveCj = false;
        if(this.detailData.vehicleCertificationReportUrl)
        {

          const obj = JSON.parse(this.detailData.vehicleCertificationReportUrl);
          obj.forEach((o )=>{
            if(o && o.url)
            {
              this.isHaveCj = true;
            }
          })
        }
        console.log(res.data.result,'什么玩意')
      })
    },
    doDelete(data){
      preparationDelete(data).then((res) => {
      const msg = res.data.message;
      this.$message.success(msg || $i18n.t("common.deleteSuccess"));
      this.getData();
    });
  },
    downloadCertificationReport(url) {
      const obj = JSON.parse(url);
      obj.forEach((o )=>{window.open(o.url)} )
    },
    handleMainPicSuccess(res, file) {
      if(res.result.path)
      {
        this.mainImgUrl = res.result.path;
      }
    },
    handleSubSuccess(res, file) {
      console.warn(this.fileListOrg,'1')
      if(res.result.path)
      {
        this.fileListOrg.push({url:res.result.path,name:''})
      }
      console.warn(this.fileListOrg,'2')
    },
    handleRemove(file, fileList) {
      console.warn(this.fileListOrg,'1')
      this.fileListOrg = fileList;
      console.warn(this.fileListOrg,'2')
    },
    handlePictureCardPreview(file) {
      this.subImgUrl = file.url;
      this.subPicViewdialogVisible = true;
    },
    doUpdateMainPic(){
      if(!this.mainImgUrl)
      {
        this.$message.warning("图片不能为空")
        return
      }
      if(this.mainImgUrl.includes("blob:"))
      {
        this.$message.warning("图片链接异常，请重新上传")
        return
      }
      const data =
        {
          id:this.detailData.id,
          vehicleCarMainPicUrl:this.mainImgUrl
        }
      tmOrderMainPicUpdate(data).then(res => {
        const message = res.data.message
        this.$message.success(message || "操作成功")
        this.getData();
        this.mainPicUpdateDialogVisible = false;
        this.mainImgUrl = ''
      })
    },
    doUpdateSubPic(){
      console.warn(this.fileListOrg)
      if(!(this.fileListOrg && this.fileListOrg.length > 0))
      {
        this.$message.warning("图片不能为空")
        return
      }
      console.warn(this.fileListOrg)
      function isBlobData(element, index, array) {
        return (!element.url.includes("blob:"));
      }
      const picUrlJoin =
        this.fileListOrg
          .filter(isBlobData)
          .map((item) => item.url)
          .join(",");
      console.warn(picUrlJoin)
      if(!picUrlJoin)
      {
        this.$message.warning("图片链接异常，请重新上传")
        return
      }
      const data =
        {
          id:this.detailData.id,
          subId:this.subId,
          subPicUpdateUrl:picUrlJoin,
          subPicUpdateType:this.subType
        }
      tmOrderSubPicUpdate(data).then(res => {
        const message = res.data.message
        this.$message.success(message || "操作成功")
        this.getData();
        this.subPicUpdateDialogVisible = false;
      })
    },
    createFile(url) {
      if(url.isPush === 'Y')
      {
        this.$message.warning("已推送数据不可重新生成")
        return
      }
      const data =
        {
          id:this.detailData.id,
          subReportType:url.reportType
        }
      tmOrderReportCreate(data).then(res => {
        const message = res.data.message
        this.$message.success(message || "报告生成中，请稍后查看")

        this.detailData.mesTmReportFiles.forEach((item, index) => {
          if(item.reportType === url.reportType)
          {
            this.detailData.mesTmReportFiles[index].inCreate = true
          }
        });
      })

    },
    pushFile(url) {
      if(url.isPush === 'Y')
      {
        this.$message.warning("已推送数据不可重新推送")
        return
      }
      if(!url.reportUrl)
      {
        this.$message.warning("所选数据目前还没有保存报告文件，如已操作生成请等待生成完毕后操作")
        return
      }
      const data =
        {
          id:this.detailData.id,
          subReportType:url.reportType
        }
      tmOrderReportPush(data).then(res => {
        const message = res.data.message
        this.$message.success(message || "推送成功")
        this.getData();
      })
    },
    updateMainPic()
    {
      this.mainImgUrl = ''
      this.mainPicUpdateDialogVisible = true;
    },
    updateMainData()
    {
      let data = this.detailData
      data.recheckData = []
      data.tmPreparationDataList = []
      data.mesTmReportFiles = []
      data.tmOrderDataList = []

      tmOrderMainDataUpdate(data).then(res => {
        const message = res.data.message
        this.$message.success(message || "修改成功")
        this.getData();
      })

    },
    //复检图片更新
    updateSubPic(data,type)
    {
      this.subId= data.id;
      this.subType = type
      const list = []
      this.fileList = []
      let url =
        type === 1 ? data.photoUrl:
          type === 2 ? data.photoUrl:
          type === 3 ? data.photoUrlNew:""
      this.fileList = url.split(",").forEach((row) => {
        if (row) {
          list.push({url:row,name:''})
        }
      });
      this.subPicUpdateDialogVisible = true;
      this.fileList = list
      this.fileListOrg = list
    },
    orderStateEnum,reportTypeEnum,reportStateEnum,reportStateTypeEnum,
    isDispenseEnum,
    mmcQuoteEnum,
    viewPic(url) {
      if(url)
      {
        this.imgUrlList = url.split(",");
        this.dialogVisible = true;
      }
      else
      {
        this.$message.warning("所选数据没有保存图片")
      }
    },
    viewFile(url) {
      if(url.inCreate)
      {
        this.$message.warning("所选报告生成中")
        return
      }
      if(url.reportUrl)
      {
        window.open(url.reportUrl, '_blank')
      }
      else
      {
        this.$message.warning("所选报告未生成")
      }
    },
    // 表格顶部按钮操作事件
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      const fnc = {
        view: () => {
          this.dataId = row.id;
          this.getData();
          this.visible = true
        },
        delete: () => {
          this.$confirm('此操作将删除该接车订单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
           this.deleteMethods(row.id)
          })
        },
      }
      fnc[handleName]()
    },
    deleteMethods(id){
      mesTmOrderDelete(id).then((res)=>{
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.refresh()
      })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    handleOperateEvent(data) {
      this.title = data.name;
      const fnc = {
        batchDelete :()=>{
          if (data.rows&&data.rows.length){
            this.$confirm('此操作将删除该接车订单, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let ids = data.rows.map((i)=>{
                return i.id
              }).join(',')
              this.deleteMethods(ids)
            })
          }else{
            this.$message({
              type: 'warning',
              message: '请至少选择一条数据进行删除!'
            })
          }
        }
      };
      fnc[data.handleName]();
    },

  }
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-top: 20px;
}
.el-row.last-child {
  margin-bottom: 0;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  display: flex;
  justify-content: center;
  min-height: 25px;
}

//:deep(.ele-form-search){
//  height: 100px !important;
//}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 178px;
  min-height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  min-width: 178px;
  min-height: 178px;
  display: block;
}
input:disabled{
  opacity: 1;
  -webkit-text-fill-color: black;
}
</style>
